<template>
	<view class="Ipages" >
		<!-- 酒店信息组件 -->
		<view class="adv" v-for="(item,index) in jdData " :key="index"
				@click="gotoJDInf(item)">
			<view class="recommend" >
				<image mode="aspectFill" src="../static/img/jd1.png" ></image>
				<!-- 介绍 -->
				<view class="explen">
					<view class="introduction">
						<view>{{item.hname}}</view>
						<!-- 图标 -->
						<view class="lcon">
							<image mode="aspectFill" src="../static/img/Wi-Fi.png"></image>
							<image mode="aspectFill" src="../static/img/stop.png"></image>
							<view>{{item.valuation}}</view>
						</view>
						<view>{{item.address}}</view>
						<view>{{item.distance}}</view>
					</view>
					<!-- 价格 -->
					<view class="price">
						<image mode="aspectFill" src="../static/img/price.png"></image>
						<view class="pr">{{item.price}}</view>
						<text>起</text>
					</view>
				</view>
				<!-- 边框 -->
			</view>
			<view class="invitation-line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"invitation",
		data() {
			return {
				// jdData:[]
			}
		},
		props:["jdData"],
		onLoad(option) {
			
		},
		mounted() {
		},
		methods:{
			gotoJDInf(item) {
				uni.navigateTo({
					url:`../order/order?_id=${item._id}`
				})
			},
		}
	}
</script>

<style scoped>
.Ipages {
	background-color: #f1f3f4;
}
	.adv{
		height: 210rpx;
	}
	/* 外框 */
	.recommend{
		height: 100rpx;
		display: flex;
	}
	/* 图片 */
	.recommend image{
		width: 150px;
		height: 100px;

	}
	.lcon{
		display: flex;
		justify-content: space-around;
	}
	.lcon image{
		width: 20px;
		height: 20px;
	}
	.explen{
		display: flex;
		font-size: 35rpx;
		margin-left: 20rpx;
	}
	.price{
		display: flex;
		margin-top: 50rpx;
		align-items: center;
		justify-content: space-around;
	}
	.price image{
		width: 30px;
		height: 30px;
	}
	.pr{
		color:#f78908;
		font-weight: bold;
	}
	.invitation-line{
		width: 100%;
		height: 10rpx;
		background-color: #ccc;
		margin-top: 100rpx;
		/* 透明度: opacity 将所有内容隐身 */
		/* rgba 只能将背景透明 */
		/* opacity: 0.3; */
	}
	.introduction{
		width: 130px;
		
	}
</style>
